<template>
  <view>
    <!-- 搜索框 -->
    <Search></Search>
    <!-- 商品列表 -->
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      active-color="#ff2d4a"
      bar-width="150"
    ></u-tabs>
    <!-- 商品列表结构  -->
    <view v-if="current === 0" class="goods_list">
      <navigator
        v-for="item in goods"
        :key="item.goods_id"
        :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
      >
        <view class="goods-img-wrap">
          <u-image
            :src="
              item.goods_small_logo ||
              'https://img0.baidu.com/it/u=2649081084,2188152067&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500'
            "
            width="191"
            height="191"
          ></u-image>
        </view>
        <view class="goods-info-wrap">
          <view class="goods_name u-line-2">{{ item.goods_name }}</view>
          <view class="goods_price">￥{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
    <view v-if="current === 1"> 销量 </view>
    <view v-if="current === 2"> 价格 </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      goods: [], //商品列表
    };
  },
  onLoad(options) {
    //小程序默认onLoad的形参可以接收到url的参数
    // console.log(options);
    // 定义一个全局变量，方便获取和方便修改
    this.params = {
      query: "", //关键字
      cid: "", // 分类id
      pagenum: 1, //页码
      pagesize: 10, //页容量
    };

    // 判断一下 如果 options.cid有值，使用cid获取商品列表数据
    if (options.cid) {
      this.params.cid = options.cid;
    }

    // 判断一下 如果 options.query有值，使用query获取商品列表数据
    if (options.query) {
      this.params.query = options.query;
    }

    this.getGoodsList(); //获取商品列表数据
  },
  methods: {
    change(index) {
      this.current = index;
    },
    //获取商品列表数据
    async getGoodsList() {
      const res = await this.$u.get("/goods/search", this.params);
      console.log(res);
      this.goods = [...this.goods, ...res.message.goods]; //新旧数组合并
      this.total = res.message.total; //全局变量 总条数
    },
  },
  // 触发下拉刷新时执行
  async onPullDownRefresh() {
    // 重置页码
    this.params.pagenum = 1;
    // 重置数组
    this.goods = [];
    // 重新发送请求
    await this.getGoodsList();
    // 需要等待数据请求回来再关闭，所以使用async await 转为同步代码
    // 数据回来关闭加载中的状态
    uni.stopPullDownRefresh();
  },
  // 页面触底时执行
  onReachBottom() {
    // 判断有没有下一页数据
    // 已经加载条数this.goods.length
    // 总条数 this.total
    // console.log("onReachBottom");
    if (this.goods.length < this.total) {
      this.params.pagenum++; //页码++
      this.getGoodsList(); //发送请求,重新渲染页面
    } else {
      uni.showToast({
        title: "没有数据了",
        icon: "none",
      });
    }
  },
};
</script>

<style lang="scss">
.goods_list {
  navigator {
    display: flex;
    .goods-img-wrap {
      flex: 1;
      padding: 20rpx;
    }
    .goods-info-wrap {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin: 10rpx 10rpx;
      .goods_name {
      }
      .goods_price {
        color: red;
        font-size: 30rpx;
      }
    }
  }
}
</style>